<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>入库上架</title>
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../../../css/AcmeMes.css" rel="stylesheet" />
		<link href="../../../css/layer.css" rel="stylesheet" />
		<script src="../../../js/lib/jquery-2.1.1.min.js"></script>
		<script src="../../../js/lib/mui.min.js"></script>
		<script src="../../../js/lib/base64.min.js"></script>
		<script src="../../../js/config.js"></script>
		<script src="../../js/WMS/WmsPurchaseReceiptOrderList_3.js"></script>
		<script type="text/javascript">
		</script>

	</head>
	<body>
		<header class="mui-bar mui-bar-nav mui-bar-transparent">
			<h2 class="mui-title">No single listing available</h2>
		</header>
		<footer class="mui-bar mui-bar-footer">
			<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">Scanned List</a>
		</footer>
		<div class="mui-content">
			<form class="mui-input-group" style="background-color: transparent;">

				<div class="mui-input-row">
					<label style="font-weight: bold; width: 50%;">Lamp bead mode:</label>
					<div class="mui-switch mui-active"> <!-- 添加mui-active类 -->
						<input type="checkbox" id="ledModeSwitch" checked> <!-- 确保有checked属性 -->
						<label class="mui-switch-handle" for="ledModeSwitch"></label>
					</div>
				</div>
				<div class="mui-input-row">
					<label style="font-weight: bold;">Warehouse:</label>
					<input type="text" id="Warehouse" readonly>
				</div>

				<div id="ledModeOptions">
					<div class="mui-input-row">
						<label style="font-weight: bold; width: 30%;">Method:</label>
						<select id="shelfOption" style="width: 61%;">
							<option value="0">Sequential listing</option>
							<option value="1">Randomly listing</option>
						</select>
					</div>

					<div class="mui-input-row">

						<label style="font-weight: bold;">LampNO:</label>
						<input type="text" id="LampNO" placeholder="Please scan the LampNO" autofocus inputmode="none"
							class="mui-input-clear">
					</div>
				</div>
				<div class="mui-input-row" id="storageLocationGroup" style=" align-items: center;">
					<label style="font-weight: bold;">StorageNO:</label>
					<input type="text" placeholder="scan storageNO" id="StorageNO">
					<div class="mui-checkbox">
						<label>
							<input type="checkbox" id="strCD">
						</label>
					</div>
					<!-- 					<input type="checkbox" id="strCD" style="width: 40px; height: 23px; appearance: checkbox;"> -->
				</div>
				<div class="mui-input-row">
					<label style="font-weight: bold;">MatCode:</label>
					<input type="text" placeholder="Please scan the MaterialCode" id="MaterialCode" inputmode="none"
						class="mui-input-clear">
				</div>
			</form>
			<div>
				<br />
				<textarea id="txtResult" style="width: 100%; height: 470px;" placeholder="Operation result"></textarea>
			</div>
			<!--右下角弹出菜单-->
			<div id="bottomPopover" class="mui-popover mui-popover-bottom">
				<div class="mui-popover-arrow"></div>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view" id="scannedBarcodesList">
						</ul>
					</div>
				</div>

			</div>
		</div>
	</body>
	<style>
		.selection-dialog {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: white;
			padding: 20px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
			z-index: 1000;
		}

		.selection-dialog button {
			margin: 5px;
		}

		.mui-bar-transparent {
			background-color: rgba(47, 64, 86, .99);
		}

		/* 确保开关开启状态样式 */
		.mui-switch.mui-active {
			background-color: #4CD964 !important;
		}

		.mui-switch.mui-active .mui-switch-handle:before {
			transform: translateX(42px) !important;
		}

		.mui-title {
			font-weight: bold;
			color: aliceblue;
		}

		input {
			white-space: nowrap;
			/* 禁止换行 */
			overflow: hidden;
			/* 隐藏溢出的文本 */
			text-overflow: ellipsis;
			/* 显示省略号 */
		}

		#txtResult {
			/* 改变文字大小 */
			font-size: 16px;
			/* 自动换行 */
			white-space: pre-wrap;
		}

		.mui-btn-success {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;
			margin-left: 90px;
		}

		select {
			width: 215px;
			background-color: #ddd;
			margin-top: 2px;
			font-size: 15px;
			margin-left: 15px;
			margin-bottom: 2px;
			text-align: center;
		}

		option {
			width: 100%;
			text-align: center;
		}

		.mui-input-row {
			margin-top: 10px;
		}

		* {
			padding: 2px;
		}

		/* 修复后的开关样式 */
		.mui-switch {
			position: relative;
			display: inline-block;
			width: 72px;
			height: 30px;
			margin-left: 15px;
		}

		.mui-switch input {
			opacity: 0;
			width: 0;
			height: 0;
		}

		.mui-switch-handle {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ccc;
			transition: .4s;
			border-radius: 34px;
		}

		/* .mui-switch-handle:before {
			position: absolute;
			content: "";
			height: 26px;
			width: 26px;
			left: 2px;
			bottom: 2px;
			background-color: white;
			transition: .4s;
			border-radius: 50%;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		} */

		.mui-switch input:checked+.mui-switch-handle {
			background-color: #4CD964;
		}

		/* .mui-switch input:checked+.mui-switch-handle:before {
			transform: translateX(1px);
		} */

		.mui-input-row.mui-radio {
			display: flex;
			align-items: center;
			padding: 10px 15px;
		}

		.mui-input-row.mui-radio label {
			flex: 1;
			font-weight: bold;
		}

		.mui-input-row.mui-radio input {
			margin-right: 10px;
		}
	</style>
</html>